<template>
    <div class="countdown-timer">
        <div v-if="!isOver">
            点餐剩余时间：{{remainTimeString}}
        </div>
        <div v-else>
            今日点餐已结束
        </div>
        <div class="return-button" @click="returnToLogin">
            <el-link class="text" style="color:white" icon="el-icon-s-home">返回登录页</el-link>
            <i class="el-icon-s-home return-icon"/>
        </div>
    </div>

</template>

<script lang="ts">
    import {Component, Prop, Vue} from 'vue-property-decorator';

    @Component
    export default class CountdownTimer extends Vue {

        @Prop() remainTime!: number
        @Prop() isOver!: boolean

        timer?: number

        get remainTimeString(): string {
            if (!this.timer) {
                this.timer = setInterval(() => {
                    this.$emit('reduce-time')
                }, 1000*60)
            }

            return this.getRemainTime(Math.floor(this.remainTime / 1000))
        }

        getRemainTime(remainTimeMills: number): string {
            const hour = Math.floor(remainTimeMills / 60 / 60)
            remainTimeMills = remainTimeMills % (60 * 60)
            const min = Math.floor(remainTimeMills / 60)

            return hour + "时" + min + "分"
        }

        returnToLogin() {
            this.$store.commit('clearUserInfo')
        }
    }
</script>

<style scoped lang="scss">

    .countdown-timer {
        width: 100%;
        height: 20px;
        position: fixed;
        z-index: 10000;
        top: 0;
        background-color: #F56C6C;
        color: white;
        text-align: center;
        padding: 15px 0;

        .return-button {
            position: absolute;
            right: 10px;
            top: 15px;
            color: white !important;
            font-size: 10px;

            @media(max-width: 600px) {
                .text {
                    display: none;
                }
            }

            @media(min-width: 601px) {
                .return-icon {
                    display: none;
                }
            }

            .return-icon {
                font-size: 16px;
            }


        }
    }
</style>